body {
    padding: 10px 25px;
    background-color: #fff;
}
p {
	display:block;
	position: relative;	
    margin:  10px 0;
}

input[type="checkbox"]{
	position:relative;
	float: left;
	opacity: 0;
    vertical-align: middle;
}

input[type="checkbox"]:before{
	position: relative;
	left: 10px;
}
	

input + label:before {
	margin: 0;
	content: " ";
	background: url(red.png) no-repeat;
	cursor: pointer;
	width: 16px;
	height: 17px;
	display:inline-block;
	z-index: 5;	
	background-position: left -1px;
}

/* CHECKED STYLES*/ 
input[type="checkbox"]:checked + label:before { background-position: left -51px; } 

/* DISABLED STYLES CheckQuestions*/
/*.disabledGeneral {
	background: url(black.png) center;
	background-position: left -76px;
	float: left;
	position: relative;
	z-index: 300;
}*/

/* READ ONLY STYLES CheckQuestions*/
.disabled {
	background: url(black.png) no-repeat; 
	background-position: left -26px;
	float: left;
	z-index: 300;
	z-index: 100;
}
/* DISABLED STYLES */
input[type="checkbox"]:disabled + label:before{
	background: url(red.png) no-repeat; 
	background-position: left -76px; 
}

/***********************************************/
/* CUSTOM ANIMATION FOR LABEL
/***********************************************/
label {
	color: #888;
	position: relative;
	left: -10px;
}
input + label:hover,
input:hover + label {
	color: #555;	
}
/* DISABLED */
input:disabled + label {
	color: #999;	
}